{% extends 'basic/component.html' %}
{% load static %}
{% load i18n %}

{% block pageTitle %}
    {% trans 'Performance Prediction' %}
{% endblock %}

{% block pageHeadExtra %}
{% endblock %}

{% block pageBody %}
 <div class="page container">
    <h1>
      {% trans 'Performance Prediction' %}
    </h1>
    <div class="panel panel-default">
      <div class="panel-body">
        <div id="by-file" class="tab-pane">
          <h3 style="text-align: center">{% trans 'Submit POSCAR file' %}</h3>
          <div class="dividing"></div>
          <form>
            <div class="row">
              <div class="col-lg-2 col-sm-2"></div>
              <div class="col-lg-8 col-sm-8">
                <div class="input-group" style="padding-left: 10px;">
                  <input id="true-file" type="file" name="files" style="display: none;"
                         onchange="Utils.afterChooseFile(this)" accept=".POSCAR">
                  <input class="form-control"
                         placeholder="{% trans 'Choose POSCAR file then submit it' %}" disabled>
                  <div class="input-group-btn">
                    <button class="btn btn-primary" type="button" onclick="Utils.chooseFile(this)">
                      {% trans 'Choose File' %}<i class="fa fa-mouse-pointer" aria-hidden="true"></i>
                    </button>
                  </div>
                  <div class="model">
                    <span class="method custer-font">{% trans 'Model' %}</span>
                    <select class="method-select custer-font" id="select-option">
                      <option value="plmf"> plmf ¹</option>
                      <option value="mfd"> mfd ² </option>
                    </select>
                  </div>
                  <div class="submit">
                    <button class="btn btn-primary" type="button" id="submit">
                      {% trans 'Submit' %}
                      <i class="fa fa-upload"></i>
                    </button>
                  </div>

                </div>
              </div>
              <div class="col-lg-2 col-sm-2"></div>
            </div>
          </form>
        </div>
        </br>
        </br>
      </div>
    </div>
    </br>
    <div class="row">
      <div class="col-md-12">
        <h3 style="margin: 5px;color: #757575;">{% trans 'Cite:' %}</h3>
        <ol id="cite">
          <li>
            O. Isayev, C. Oses, C. Toher, E. Gossett, S. Curtarolo, and A. Tropsha, Universal fragment descriptors for predicting electronic properties of inorganic crystals, Nat. Commun. 8, 15679 (2017).
            <a href="https://doi.org/10.1038/ncomms15679"target="_blank">org/10.1038/ncomms15679</a>
          </li>
          <li>
            F. Legrain, J. Carrete, A. van Roekeghem, S. Curtarolo, N. Mingo, How chemical composition alone can predict vibrational free energies and entropies of solids, Chem. Mater. 29 (15), 6220–6227 (2017).
            <a href="https://doi.org/10.1021/acs.chemmater.7b00789" target="_blank">doi.org/10.1021/acs.chemmater.7b00789</a>
          </li>
          <li>
           E. Gossett, C. Toher, C. Oses, O. Isayev, F. Legrain, F. Rose, E. Zurek, J. Carrete, N. Mingo, A. Tropsha, and S. Curtarolo AFLOW-ML: A RESTful API for machine-learning predictions of materials properties, Comp. Mat. Sci. 152, 134-145 (2018).
            <a href="https://doi.org/10.1016/j.commatsci.2018.03.075" target="_blank">doi.org/10.1016/j.commatsci.2018.03.075</a>
          </li>
        </ol>
      </div>
    </div>
    </br>
    </br>
    <div class="panel panel-default">
      <div class="panel-body">
        <h3 style="text-align: center">{% trans 'Predictions' %}</h3>
        <div class="dividing"></div>
        <div class="row">
          <div class="col-md-1"></div>
          <div class="col-md-10">
            <div class="row">
              <div class="col-md-12">
                <div class="card">
                  <section id="result">
{#                    <div class="col-md-12 card-text-col">#}
{#                      <p class="prediction-type-text">prediction type text1</p>#}
{#                    </div>#}
{#                    <div class="col-md-6 card-text-col">#}
{#                      <h3 class="section-title">section title</h3>#}
{#                      <p class="prediction-text">prediction text</p>#}
{#                    </div>#}
{#                    <div class="col-md-6 card-text-col">#}
{#                      <h3 class="section-title">section title</h3>#}
{#                      <p class="prediction-text">prediction text</p>#}
{#                    </div>#}
{#                      <div class="col-md-6 card-text-col">#}
{#                      <h3 class="section-title">section title</h3>#}
{#                      <p class="prediction-text">prediction text</p>#}
{#                    </div>#}
{#                    <div class="col-md-6 card-text-col">#}
{#                      <h3 class="section-title">section title</h3>#}
{#                      <p class="prediction-text">prediction text</p>#}
{#                    </div>#}
                  </section>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="col-md-12">
                <div class="card-action">
                  <span class="card-action-warning" id="card-action-warning">{% trans 'REMOVE' %}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-1"></div>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block pageFootExtra %}
    <link href="{% static 'css/material/ppredict.css' %} " rel="stylesheet">
    <script src="{% static 'js/material/ppredict.js' %}"></script>
{% endblock %}